import React, { Component } from 'react'
import { addAction, minusAction, asyncAction } from '../../redux/actions/count'
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'


// 定义UI组件
class Count extends Component {

    add = () => {
        const { value } = this.selectNumber
        // 通知redux改数据。【*1 强制类型转换】
        this.props.jia(value * 1)
    }
    minus = () => {
        const { value } = this.selectNumber
        this.props.jian(value * 1)
    }
    addOdd = () => {
        const { value } = this.selectNumber
        if (this.props.count % 2 !== 0) this.props.jia(value * 1)
    }
    addAsync = () => {
        const { value } = this.selectNumber
        this.props.asyncJia(value * 1,1000)
    }
    render() {

        return (
            <div>
                <h1>当前求和为：{this.props.count}，当前人数为：{this.props.renArr.length}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.add}>+</button>
                <button onClick={this.minus}>-</button>
                <button onClick={this.addOdd}>当前求和为奇数在加</button>
                <button onClick={this.addAsync}>异步加</button>
            </div>
        )
    }
}


// 创建并暴露一个Count的容器组件
export default connect(
    state => ({ count: state.countRedux, renArr: state.personRedux }),  // 映射状态
    {   // 映射操作状态的方法
        jia: addAction,
        jian: minusAction,
        asyncJia: asyncAction
    }
)(Count)